<template>
  <div>
    <div class="payment-miniapp-tab tabs-box">
      <el-tabs
        v-model="tabsActive"
        type="border-card"
        @tab-click="tabChange"
      >
        <el-tab-pane
          v-for="(item,index) in tasActiveList"
          :key="index"
          :label="item.label"
          :name="item.value"
          class="rowFlex flexWarp"
        >
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="content-outer">
      <Block class="content-head">
        <BiForm>
          <BiFormItem label="活动名称">
            <template slot="content">
              <selectPlaylet
                :multiple="true"
                type="activity"
                :activity_type="tabsActive"
                :is-resize="isResize"
                @result="activeIdResult"
              />
            </template>
          </BiFormItem>
          <BiFormItem label="活动标题">
            <template slot="content">
              <el-input v-model="formData.title"></el-input>
            </template>
          </BiFormItem>
          <DateSelect
            :default-value="[formData.activity_time_start,formData.activity_time_end]"
            label="活动时间"
            :is-resize="isResize"
            @result="resultDate"
          />
          <BiFormItem label="启用状态">
            <template slot="content">
              <el-select
                v-model="formData.status"
                clearable
                placeholder="请选择状态"
              >
                <el-option
                  v-for="item in statusList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </template>
          </BiFormItem>
          <DateSelect
            label="创建时间"
            :is-resize="isResize"
            @result="createResultDate"
          />
          <BiFormItem>
            <template slot="button">
              <el-button
                style="margin-left: 10px"
                type="primary"
                :disabled="loading"
                :loading="loading"
                @click="clickSearch('查询')"
              >查询</el-button>
              <el-button @click="reset">重置</el-button>
            </template>
          </BiFormItem>
        </BiForm>
      </Block>
      <Block class="content-table">
        <div class="action-box" style="margin-bottom:0px;">
          <div class="left"></div>
          <div class="right rowFlex">
            <el-button style="margin-right:10px;" type="primary" @click="showAddTaskFn">创建活动</el-button>
          </div>
        </div>
      </Block>
      <div class="table-table">
        <BiTable
          :loading="loading"
          :data="tableData"
          size="medium"
          :column="tableColums"
          fixed="sticky"
          fixed-offset="50"
          pagination
          layout="total, prev, pager, next"
          :auto-scroll="false"
          :total="page_info.total"
          :page.sync="page_info.page"
          :limit.sync="page_info.page_size"
          @pagination="handlePageChange"
        >
          <template v-slot:title="{ row }">
            <p>{{ row.title }}</p>
            <p class="textInfo">{{ row.start_time }} - {{ row.end_time }}</p>
          </template>
          <template v-slot:name="{ row }">
            <p>{{ row.name }}</p>
            <p class="textInfo">ID：{{ row.id }}</p>
          </template>
          <template v-slot:activity_link="{ row }">
            <div v-if="row.activity_link " class="rowFlex allCenter">
              <p class="copyText">{{ row.activity_link }}</p>
              <el-button
                type="text"
                size="medium"
                :data-clipboard-text="row.activity_link"
                class="activity_link_copy"
                @click="copyText('activity_link_copy')"
              ><svg-icon icon-class="copyRight" style="font-size:12px;margin-left:2px;" /> </el-button>
            </div>
          </template>
          <template v-slot:activity_url="{ row }">
            <div class="rowFlex allCenter">
              <p class="copyText">{{ row.activity_url }}</p>
              <el-button
                type="text"
                size="medium"
                :data-clipboard-text="row.activity_url"
                class="activity_url_copy"
                @click="copyText('activity_url_copy')"
              ><svg-icon icon-class="copyRight" style="font-size:12px;margin-left:2px;" /> </el-button>
            </div>
          </template>
          <template v-slot:status="{ row }">
            <div>
              <el-switch v-model="row.status" active-value="1" inactive-value="0" @change="onStatusChange(row.id, row.status)"> </el-switch>
            </div>
          </template>
          <template v-slot:member_attribute="{ row }">
            <div v-if="row.member_attribute.condition&&row.member_attribute.condition.length>0">
              <div v-for="(item,index) in row.member_attribute.condition" :key="index" class="member_attribute">
                <p><span class="label">{{ item.title }}</span>: <span class="value">{{ item.value }}</span></p>
              </div>
            </div>
            <div v-else>--</div>
          </template>
          <template v-slot:operate="{ row }">
            <div>
              <el-button type="text" size="medium" @click="watchTask(row)">查看</el-button>
              <el-popconfirm
                icon="el-icon-info"
                icon-color="red"
                style="margin-left:10px;"
                title="确定删除吗？"
                @confirm="delRow(row)"
              >
                <el-button
                  slot="reference"
                  type="text"
                  size="medium"
                >删除</el-button>
              </el-popconfirm>
            </div>
          </template>
        </BiTable>
      </div>
    </div>
    <BiDrawer
      v-model="showAddTask"
      :tabs-active="tabsActive"
      :drawer-title="rowInfo.id?'查看任务':'新建任务'"
      :component="addTask"
      :row="rowInfo"
      drawer-size="800px"
      @ok="onSubmit"
    ></BiDrawer>
  </div>
</template>
<script>
import BiDrawer from '@/components/BiDrawer'
import DateSelect from '@/common/component/form/dateSelect.vue'
import { activityList, activitySwitch, activityDelete } from '@/api/active'
import Clipboard from 'clipboard'
import addTask from './component/addTask.vue'
export default {
  components: {
    BiDrawer,
    DateSelect
  },
  data() {
    return {
      addTask: addTask,
      showAddTask: false,
      tabsActive: '1', // 1充值活动 2 赠币活动
      tasActiveList: [
        { component: 'advertise', label: '充值活动', value: '1' },
        { component: 'advertise', label: '赠币活动', value: '2' }
      ],
      statusList: [
        {
          value: -1,
          label: '全部'
        },
        {
          value: 1,
          label: '开启'
        },
        {
          value: 0,
          label: '关闭'
        }
      ],
      isResize: false,
      loading: false,
      tableData: [],
      tableColums: [
        {
          label: '活动标题/起止时间',
          prop: 'title',
          minWidth: 290,
          slotScope: true
        },
        {
          label: '活动名称/ID',
          prop: 'name',
          minWidth: 200,
          slotScope: true
        },
        {
          label: '活动链接',
          minWidth: 230,
          prop: 'activity_link',
          slotScope: true
        },
        {
          label: '活动路径',
          prop: 'activity_url',
          minWidth: 230,
          slotScope: true
        },
        {
          label: '活动类型',
          prop: 'type',
          minWidth: 100,
          render: (h, { row }) => {
            if (this.tabsActive == 1) {
              if (row.recharge_config.type == '1') {
                return <span>充值喵币 </span>
              } else {
                return <span>会员充值 </span>
              }
            } else {
              return <span>赠送喵币 </span>
            }
          }
        },
        {
          label: '充值档位',
          renderHeader: (h, { row }) => {
            if (this.tabsActive == 1) {
              return '充值档位'
            } else {
              return '领取类型'
            }
          },
          prop: 'recharge_config',
          minWidth: 170,
          render: (h, { row }) => {
            if (this.tabsActive == 1) {
              if (row.recharge_config.type == '1') {
                return <div>
                  <p>充值{Number(row.recharge_config.amount)}元</p>
                  <p>得{Number(row.recharge_config.amount) * 100}喵币 + {row.recharge_config.free_coin}赠币</p>
                </div>
              } else {
                return <span>
                  <p>充值{Number(row.recharge_config.amount)}元</p>
                  <p>得{row.recharge_config.vipText}</p>
                </span>
              }
            } else if (this.tabsActive == 2) {
              return <div>
                <p>参与活动,送{Number(row.coin_num)}赠币</p>
              </div>
            }
          }
        },
        {
          prop: 'recharge_member',
          renderHeader: (h, { row }) => {
            if (this.tabsActive == 1) {
              return '充值成功总人数(人)'
            } else {
              return '领取成功总人数(人)'
            }
          },
          minWidth: 85
        },
        {
          renderHeader: (h, { row }) => {
            if (this.tabsActive == 1) {
              return '充值成功总次数(次)'
            } else {
              return '领取成功总次数(次)'
            }
          },
          prop: 'recharge_count',
          minWidth: 85
        },
        {
          label: '访问总人数(人)',
          prop: 'view_member',
          minWidth: 85
        },
        {
          label: '用户属性',
          prop: 'member_attribute',
          minWidth: 380,
          slotScope: true
        },
        {
          label: '创建人',
          prop: 'creator',
          minWidth: 90
        },
        {
          label: '创建时间',
          prop: 'create_time',
          minWidth: 170
        },
        {
          label: '启用状态',
          prop: 'status',
          fixed: 'right',
          minWidth: 110,
          renderHeader: (h, { row }) => {
            return (
              <div>
                启用状态
                <el-tooltip class='item' effect='dark' placement='top'>
                  <div slot='content' class='tooltipLine'>
                    默认开启,若关闭此按钮,活动则取消;
                  </div>
                  <i class='el-icon-question' style='margin-left:5px;'></i>
                </el-tooltip>
              </div>
            )
          },
          slotScope: true
        },
        {
          label: '操作',
          prop: 'operate',
          fixed: 'right',
          minWidth: 110,
          slotScope: true
        }
      ],
      rowInfo: {},
      page_info: {
        page: 1,
        page_size: 20,
        total: 0
      },
      optionsList: {
        serchList: [],
        commonDataList: []
      },
      formData: {
        status: -1,
        activity_id: [],
        title: '',
        create_time_start: '',
        create_time_end: '',
        activity_time_start: '',
        activity_time_end: ''
      }
    }
  },
  mounted() {
    this.startSearch()
    this.$AccessReport.report('zhangyu-activity', [this.$store.state.user.routerItem.name, '促销活动', '充值活动'])
  },
  methods: {
    copyText(dom) {
      const clipboard = new Clipboard('.' + dom)
      clipboard.on('success', (e) => {
        this.$message.success('复制成功')
        // 释放内存
        clipboard.destroy()
      })
    },
    onSubmit() {
      this.startSearch()
    },
    watchTask(row) {
      this.rowInfo = row
      this.showAddTask = true
    },
    showAddTaskFn() {
      this.rowInfo = {}
      this.showAddTask = true
    },
    tabChange() {
      this.loading = true
      this.tableData = []
      if (this.tabsActive === '1') {
        this.$AccessReport.report('taskCenter-activity', [this.$store.state.user.routerItem.name, '促销活动', '充值活动'])
      } else if (this.tabsActive === '2') {
        this.$AccessReport.report('taskCenter-activity', [this.$store.state.user.routerItem.name, '促销活动', '赠币活动'])
      }
      if (this.tabsActive == 1) {
        this.tableColums.splice(9, 0, {
          label: '用户属性',
          prop: 'member_attribute',
          slotScope: true,
          minWidth: 380
        })
      } else {
        const index = this.tableColums.findIndex((item) => item.prop == 'member_attribute')
        if (index >= 0) {
          this.tableColums.splice(index, 1)
        }
      }
      this.isResize = true
      setTimeout(() => {
        this.isResize = false
      }, 200)
      this.startSearch()
    },
    startSearch() {
      this.page_info = {
        page: 1,
        page_size: 20,
        total: 0
      }
      this.clickSearch()
    },
    resultDate(value) {
      this.formData.activity_time_start = value.start_date
      this.formData.activity_time_end = value.end_date
    },
    createResultDate(value) {
      this.formData.create_time_start = value.start_date
      this.formData.create_time_end = value.end_date
    },
    handlePageChange(page) {
      this.page_info.page = page.page
      this.clickSearch()
    },
    async clickSearch(type) {
      this.loading = true
      if (type === '查询') {
        this.page_info = {
          page: 1,
          page_size: 20,
          total: 0
        }
      }
      const data = {
        type: this.tabsActive,
        ...this.page_info,
        ...this.formData
      }
      const res = await activityList(data)
      if (res.status_code === 1) {
        this.tableData = res.data.data
        this.page_info = res.data.page_info
      }
      this.loading = false
    },
    async onStatusChange(id, status) {
      const res = await activitySwitch({
        activity_id: id,
        status
      })
      if (res.status_code == 1) {
        this.$message.success(res.msg)
      }
    },
    requestNextPage(pageInfo) {
      this.page_info.page = pageInfo.page
      this.clickSearch()
    },
    reset() {
      this.$set(this, 'formData', {
        status: -1,
        activity_id: [],
        title: '',
        create_time_start: '',
        create_time_end: '',
        activity_time_start: '',
        activity_time_end: ''
      })
      this.isResize = true
      setTimeout(() => {
        this.isResize = false
      }, 200)
      this.$set(this, 'page_info', {
        page: 1,
        page_size: 20,
        total: 0
      })
      this.clickSearch('查询')
    },
    activeIdResult(value) {
      this.formData.activity_id = value
    },
    activeTitleResult(value) {
      this.formData.title = value
    },
    async delRow(row) {
      const res = await activityDelete({ activity_id: row.id })
      if (res.status_code == 1) {
        this.$message.success('删除成功')
        this.clickSearch()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.payment-miniapp-tab{
  height: 70px;
}
.game-name {
  display: flex;
  align-items: center;
  .svg-icon-box {
  }
  .private_key {
    width: 120px;
    height: auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
  }
}
.content-table{
    .textInfo{
        font-size: 14px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #86909C;
    }
}
.templateContent {
  width: 100%;
  overflow: auto;
}
.templateList {
  width: 1650px;
  min-height: 300px;
  .templateItem {
    margin-left: 20px;
  }
}
.table-table{
  padding:0 20px;
  background: #fff;
  .copyText{
    width: 100%;
    line-height: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .member_attribute{
    .label{
      color: #86909C;
    }
  }

}
</style>
<style lang="scss">